<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="用户名:" prop="name">
        <el-input v-model="form.name" clearable></el-input>
      </el-form-item>

      <el-form-item label="密码:" prop="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-row>
        <el-button type="primary" @click="onSubmit" style="width: 50%">登录</el-button>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  export default {
    name: 'UserLogin',
    methods: {
      myEvent: function () {},
      onSubmit: function () {

        this.$router.push({
          name: 'index'
        })

        // let _this = this;

        // //找到ref=myform的Vue组件  ..validate调用子组件的验证方法
        // //调用子组件的验证方法，获得表单校验结果，结果为真就可以提交表单，否则不能提交表单
        // this.$refs.myform.validate(function (valid, object) {
        //   if (valid) {
        //     console.log("点击了登录，要提交的表单数据为:", _this.form)
        //     //做一个简单判断，当用户名为admin,密码为123456时，表示用户名密码正确，跳转到/main页面中

        //     _this.$router.push({
        //       path: '/index'
        //     }) //路由跳转,跳转到首页
        //   } else {
        //     console.log('error submit!!');
        //     console.log(object); //校验未通过的字段。。
        //     return false;
        //   }
        // });
      }
    },
    data() {
      let _this = this;

      return {

        rules: { //定义校验的规则
          name: [{
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }, ],
          confirmpassword: [
            //validator: validatePass2, 表示确认密码的校验要调用一个js函数  函数名为validatePass2()
            {
              required: true,
              validator: function (rule, value,
                callback) { //value就是验证所绑定的表单元素的值,callback是一个函数，我们需要调用callback（）函数来决定校验是否通过
                console.log(rule);
                console.log(value);
                console.log(callback);
                if (value == '') { //提示确认密码不能为空，调用第三个参数callback
                  callback(new Error('确认密码不能为空'));
                } else if (_this.form.password != value) {
                  callback(new Error('两次输入的密码不一致'));
                }
                //正常情况下就直接调用 callback
                callback();

              },
              trigger: 'blur'
            },
          ],
        },
        form: {
          name: 'admin',
          password: '123456',
          confirmpassword: ''
        }
      }
    }

  }

</script>
<style>

</style>
